﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles{
   <style>
    .rolemenu{
        
    }
    .rolemenu .layui-form-checkbox span {
        padding: 0 10px;
        height: 100%;
        border-radius: 2px 0 0 2px;
        padding-left: 25px;
        overflow: hidden;
    }
    .roletable .layui-table-cell{
        height:auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
    }
    </style>
}
<div class="layui-card">
    <div class="layui-card-body layui-row layui-col-space10">
        <div class="layui-tab layui-tab-brief" lay-filter="role-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">角色信息</li>
                <li>权限信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" lay-filter="dictype-form" style="padding: 15px 0 0 0;">
                        <input type="hidden" name="Id" value="@Model.Id" />
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">角色名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="RoleName" lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input" value="@Model.RoleName">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">角色编码</label>
                            <div class="layui-input-block">
                                <input type="text" id="RoleCode" name="RoleCode" @(Model.Id > 0 ? "readonly" : "") lay-verify="required" placeholder="请输入角色编码"
                                       autocomplete="off" class="layui-input @(!string.IsNullOrEmpty(Model.RoleCode)?"readonly-b":"")" value="@Model.RoleCode" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="number" id="RoleSeq" name="RoleSeq" placeholder="请输入排序"
                                       autocomplete="off" class="layui-input" value="@Model.RoleSeq" min="0" max="99" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">启用</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="isenable" lay-skin="switch" @(Model.Isenable ? "checked" : "")>

                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                描述
                            </label>
                            <div class="layui-input-block">
                                <textarea name="remark" placeholder="请输入描述" class="layui-textarea">@Model.Remark</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-hide" lay-submit lay-filter="role-submit" id="role-submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item ">
                    <div style="overflow: auto;" class="roletable">
                        <table id="role-table" lay-filter="role-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    @section scripts{
        <script>
        var funcodearry = @Html.Raw(ViewBag.MenuFunList);
        var getfun = function (fcode, mencode, rolefuncode) {
            var html = '<div class="rolemenu"> ';
            for (var i = 0; i < funcodearry.length; i++) {
                if (fcode.indexOf(funcodearry[i].FunCode) > -1) {
                    var checked = "";
                    if (rolefuncode != undefined && rolefuncode.indexOf(funcodearry[i].FunCode) > -1) {
                        checked = "checked";
                    }

                    html += '<input type="checkbox" id="' + mencode + '-' + funcodearry[i].FunCode + '" name="funcode"  value="' + mencode + '-' + funcodearry[i].FunCode + '" lay-filter="chk-item" lay-skin="primary" title="' + funcodearry[i].FunName + '" ' + checked + ' />';
                }
            }
            html += '</div>';
           
            return html;
        }
        layui.use(['table', 'form', 'lscom', 'treetable'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let treetable = layui.treetable;
            let lscom = layui.lscom;

            var index = parent.layer.getFrameIndex(window.name);

            //table = $.extend(table, { config: { checkName: 'checked' } });
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pId',
                skin: 'line',
                elem: '#role-table',
                url: '/Systems/Role/GetRoleAllMenu?roleCode=@Model.RoleCode',
                page: false,
                cols: [
                    [
                        { type: 'checkbox', width: 60 },
                        { field: "name", title: "菜单名称", width: 180 },
                        {
                            field: 'funcode', title: '所属功能', width: 550, templet: function (d) {
                                return getfun(d.funcode, d.menuCode, d.rolefuncode);

                            }
                        }
                    ]
                ],
                done: function (res, curr, count) {

                    //form.render()
                }
            });

            window.submitForm = function () {
                $("#role-submit").click();
            }
           
            table.on('checkbox(role-table)', function (obj) {
                if (obj.type == "all") {
                    $('.rolemenu input[type="checkbox"]').prop('checked', obj.checked);
                    form.render("checkbox");
                } else if (obj.type == "one") {
                    $(obj.tr).find('input[type="checkbox"]').prop('checked', obj.checked);
                    form.render("checkbox");
                }
            });
            form.on('checkbox(chk-item)', function (data) {
                var ids = data.elem.attributes.id.nodeValue.split('-');
                if (data.elem.checked && ids[1] != "Select") {
                    if (!$("#" + ids[0] + "-Select").prop("checked")) {
                        $("#" + ids[0] + "-Select").next().click();
                    }
                } else {
                    if (!data.elem.checked && ids[1] == "Select") {
                        $(data.elem).siblings('input').each(function () {
                            if ($(this).prop("checked")) {
                                $(this).next().click();
                            }
                        });
                    }
                }
                var lenchked = $(data.elem).parents('td').find('input[type="checkbox"]:checked');
               
                if(lenchked.length>0 ){
                     if(!$(data.elem).parents('tr').find('td:eq(0)').find('input[type="checkbox"]').prop("checked")){
                          $(data.elem).parents('tr').find('td:eq(0)').find('.layui-form-checkbox').click(); 
                     }
                }
                else{
                    if($(data.elem).parents('tr').find('td:eq(0)').find('input[type="checkbox"]').prop("checked")){
                          $(data.elem).parents('tr').find('td:eq(0)').find('.layui-form-checkbox').click(); 
                     }
                }
            });
            form.on('submit(role-submit)', function (data) {

                data.field.isenable = data.field.isenable == "on";
                let checkData = table.checkStatus("role-table").data;
                if (checkData.length === 0) {
                    parent.layer.msg("未选中授权菜单", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }
                var menuCodes = checkData.map(function (d) { return d.menuCode; });
                console.log(menuCodes);
                data.field.MenuCode = menuCodes.join(',');
                let funcodes = [];
                $('.rolemenu input[type="checkbox"]').each(function () {
                    if ($(this).prop('checked')) {
                        funcodes.push($(this).val());
                    }
                });
                data.field.FunCode = funcodes.join(',');
               
                var field = data.field;
                var waitIndex = parent.layer.load(2);
                lscom.ajax({
                    url: "/Systems/Role/SaveRoleMenu",
                    data: JSON.stringify(field),
                    lsHandleError: false
                }).done(function (data) {
                    if (data.code == 0) {
                        data.index = index;
                        let parentWindow = parent.selectedWindow().window;
                        parentWindow.saveCallback(data);
                    }
                }).fail(function (message) {
                    lscom.notify.error(message);
                }).always(function () {
                    parent.layer.close(waitIndex);
                });

                return false;
            });
        });
        </script>
    }

